<!--
 * hi-image - 图片
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <view class="hi-image" :class="_classes" :style="_styles" :hover-class="hover" @tap="_emits('click')">
        <image
            class="hi-image__image"
            :src="src"
            :mode="mode"
            :lazy-load="lazyLoad"
            :fade-show="fadeShow"
            :webp="webp"
            :draggable="draggable"
            :show-menu-by-longpress="showMenuByLongpress"
            @load="onLoad"
            @error="onError"
        />
        <view class="hi-image__status hi-image__status--loading" v-if="status === 'loading' && loading">
            <hi-icon class="hi-image__status__icon hi-image__status__icon--loading" :name="loadingIcon"></hi-icon>
            <text class="hi-image__status__text hi-image__status__text--loading">{{ loadingText }}</text>
        </view>
        <view class="hi-image__status hi-image__status--error" v-if="status === 'error' && error">
            <hi-icon class="hi-image__status__icon hi-image__status__icon--error" :name="errorIcon"></hi-icon>
            <text class="hi-image__status__text hi-image__status__text--error">{{ errorText }}</text>
        </view>
    </view>
</template>

<!-- 由于 HbuilderX 不支持 defineOptions() 写法，故只能在此处进行配置 -->
<script>
    export default { options: uni?.$hi?.config?.componentsOptions || {} };
</script>

<script setup>
    import { ref, computed } from "vue";
    import props from "./props.js";

    // 组件属性
    const _props = defineProps(props);

    // 组件事件
    const _emits = defineEmits(["load", "error", "click"]);

    // 组件类名
    const _classes = computed(() => {
        const classes = [];

        // 圆形图片
        if (_props.circle) classes.push("hi-image--circle");

        // 边框
        if (_props.border) classes.push("hi-image--border");

        return classes;
    });

    // 组件样式
    const _styles = computed(() => {
        const styles = [];

        // 宽
        if (_props.width) styles.push(`--hi-image-width: ${_props.width}`);

        // 高
        if (_props.height) styles.push(`--hi-image-height: ${_props.height}`);

        // 背景
        if (_props.bg) styles.push(`--hi-image-background: ${_props.bg}`);

        // 圆角
        if (_props.radius) styles.push(`--hi-image-border-radius: ${_props.radius}`);

        // 边框
        if (_props.borderColor) styles.push(`--hi-image-border-color: ${_props.borderColor}`);
        if (_props.borderWidth) styles.push(`--hi-image-border-width: ${_props.borderWidth}`);
        if (_props.borderStyle) styles.push(`--hi-image-border-style: ${_props.borderStyle}`);

        return styles;
    });

    // 图片加载状态
    const status = ref("loading");

    /**
     * 图片加载完成
     */
    function onLoad() {
        status.value = "loaded";
        _emits("load");
    }

    /**
     * 图片加载失败
     */
    function onError() {
        status.value = "error";
        _emits("error");
    }
</script>

<style lang="scss" scoped>
    .hi-image {
        width: var(--hi-image-width, 360rpx);
        height: var(--hi-image-height, 360rpx);
        position: var(--hi-image-position, relative);
        border-radius: var(--hi-image-border-radius, 0);
        background: var(--hi-image-background, none);
        border: var(--hi-image-border-width, 0) var(--hi-image-border-style, solid) var(--hi-image-border-color, currentColor);

        &__image {
            width: 100%;
            height: 100%;
            border-radius: inherit;
            display: block;
        }

        &__status {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 5;
            display: var(--hi-image-status-display, flex);
            align-items: var(--hi-image-status-align-items, center);
            justify-content: var(--hi-image-status-justify-content, center);
            flex-direction: var(--hi-image-status-flex-direction, column);
            border-radius: inherit;
            gap: var(--hi-image-status-gap, 6px);

            &__icon {
                font-size: var(--hi-image-status-icon-font-size, 2em);
                color: var(--hi-image-status-icon-color, inherit);

                &--loading {
                    animation-name: hi-animate-spin;
                    animation-duration: var(--hi-loading-animation-duration, 1.5s);
                    animation-iteration-count: var(--hi-loading-animation-iteration-count, infinite);
                    animation-timing-function: var(--hi-loading-animation-timing-function, linear);
                }
            }

            &__text {
                font-size: var(--hi-image-status-text-font-size, 0.8);
                color: var(--hi-image-status-text-color, inherit);
            }
        }

        &--circle {
            border-radius: var(--hi-image-border-radius, 50%);
        }

        &--border {
            border-width: var(--hi-image-border-width, 1px);
        }
    }
</style>
